<template>
  <vxe-modal
    title="查看企业工法公布记录详情"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="70%" showFooter esc-closable show-zoom resize>

    <div style="height: 69vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 基本资料 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">基本资料</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  审核时间：
                </div>
              </template>
              {{ gffblbData.shTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  审核意见：
                </div>
              </template>
              {{ gffblbData.shYj }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>
        <!-- 工法发布列表 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff">工法发布列表</span>
          </div>
          <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="qygfgbGffblbList" height="30vh"
                    ref="qygfgbGffblb">
<!--            <el-table-column type="selection" width="50" align="center"/>-->
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="年度" align="center" prop="nd" width="150"/>
            <el-table-column label="工法名称" align="center" prop="gfName">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleButtonClick(scope.row)"
                >
                  <el-link type="primary">{{ scope.row.gfName }}</el-link>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="申报级别" align="center" prop="sbJb"/>
            <el-table-column label="工法类别" align="center" prop="gfLb"/>
            <el-table-column label="申报单位" align="center" prop="sbDw"/>
          </el-table>
        </el-card>
        <br>

      </el-card>
    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>

    <!-- 企业工法详情 -->
    <QyGfXq ref="qyGfXq"/>
  </vxe-modal>
</template>
<script>

import {getQygfgb} from "@/api/kjcg/qygfgb";
import QyGfXq from "@/views/kjcg/qygfsb/components/QyGfXq.vue";

export default {
  name: "QyGfGbJlXq",
  components: {QyGfXq},
 //企业工法公布记录详情组件
  data() {
    return {
      // 工法发布列表表格数据
      qygfgbGffblbList: [],
      loadingFj: false,
      loading: false,
      gffblbData: [], //工法发布列表基本资料
      qygfgbId: null, //工法发布列表主键ID
      dialogVisible: false,
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
      },
    };
  },
  created() {
  },
  methods: {
    //打开企业工法详情
    handleButtonClick(row) {
      this.$refs.qyGfXq.handleOpen(row);
    },
    handleOpen(row) {
      this.loading = true;
      this.qygfgbId = row.qygfgbId
      this.dialogVisible = true
      this.getGffblbData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getGffblbData() {
      const qygfgbId = this.qygfgbId
      getQygfgb(qygfgbId).then(res => {
        this.gffblbData = res.data
        this.qygfgbGffblbList = res.data.qygfgbGffblbList;
      })
    },


  }
};
</script>

<style scoped>
.right-align-label {
  text-align: right;
}
</style>
